<template>
<!--预备投资项目详情-->
  <div>
      <common-title icon="company-icon" :title-name="projectName"></common-title>
      <div class="menu-tabs-wrap">
          <el-tabs v-model="activeName" class="menu-tabs"  @tab-click="handleClick">
              <el-main
                  v-loading="isLoading"
                  element-loading-text="数据加载中……"
              >
                  <el-tab-pane label="基础信息" name="basicInformation">
                      <basic-information ref="basicInformationRef"/>
                  </el-tab-pane>
                  <el-tab-pane label="项目阶段" name="projectNode">
                      <project-node ref="projectNodeRef"/>
                  </el-tab-pane>
                  <el-tab-pane v-if="status!=0" label="立项信息" name="projectApprovalInformation">
                      <project-approval-information ref="projectApprovalInformationRef"/>
                  </el-tab-pane>
                  <el-tab-pane label="投资方案" name="investmentPlan">
                      <investment-plan ref="investmentPlanRef"/>
                  </el-tab-pane>
              </el-main>
          </el-tabs>
      </div>
  </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import {ElTabs,ElTabPane,ElMain} from "element-plus";
import {onMounted, ref} from "vue";
import BasicInformation from "./components/basicInformation";
import ProjectNode from "./components/projectNode";
import InvestmentPlan from "./components/investmentPlan";
import ProjectApprovalInformation from "./components/projectApprovalInformation";
import {useRouter} from "vue-router";

const activeName = ref('basicInformation');
const router = useRouter();
const projectId  = router.currentRoute.value.params.projectId;
const status  = router.currentRoute.value.params.status;
const projectName = ref('');

/**
 * el-tabs被点击时触发
 * @param e
 */
const isLoading = ref(false);
const basicInformationRef = ref(null);
const projectNodeRef = ref(null);
const investmentPlanRef = ref(null);
const projectApprovalInformationRef = ref(null);
const handleClick = (e) => {
    isLoading.value = true;
    const callback = ()=>{
        isLoading.value = false;
    }
    switch (e.index) {
        case '0':
            basicInformationRef.value.getData(callback);
            break;
        case '1':
            projectNodeRef.value._init(callback);
            break;
        case '2':
            investmentPlanRef.value.getData({
                pageNum:1,
                pageSize:10,
                param:{
                    projectId:projectId
                }
            },callback);
            break;
        case '3':
            projectApprovalInformationRef.value.getData({
                pageNum:1,
                pageSize:10,
                param:{
                    projectId:projectId
                }
            },callback);
            break;
    }
}

onMounted(()=>{
    basicInformationRef.value.getData((res)=>{
        projectName.value = res.data.projectName || '暂无';
    });
});
</script>

<style scoped>

</style>
